<template>
  <!-- dirItem -->
  <el-row :gutter="24" style="margin-left:0; margin-right: 0;border-bottom: solid 1px #ccc;"
    class=" h-[42px] bg-white f-list text-gray-900">
    <el-col :span="9" class="text-lg h-full flex flex-row items-center justify-between ">
      <div class="h-full flex items-center justify-between cursor-pointer">
        <div class="felx items-center">
          <i class="iconfont relative mx-3 text-2 xl" :class="iconStyle.icon" :style="{ color: iconStyle.color }"></i>
          <span>{{ props.item.file.name }}</span>
        </div>
      </div>
    </el-col>
    <el-col :span="6" style="line-height: 60px;">
      <div class="flex h-full w-full justify-center items-center text-lg">-</div>
    </el-col>
    <el-col :span="9" class="h-full" style="line-height: 60px;">
      <div class="flex w-full h-full items-center">
        {{ props.item.file.created_time }}
      </div>
    </el-col>
  </el-row>
</template>


<script lang="ts" setup>
import { computed } from 'vue'


const props = defineProps({
  item: {
    type: Object,
    default: () => {
      return {}
    }
  },
  index: {
    type: [String, Number],
    default: 0
  }
})

const icons: any = {
  dir: {
    icon: 'icon-file-b-2',
    color: '#E6A23C'
  },
  image: {
    icon: 'icon-file-b-6',
    color: 'text-success'
  },
  text: {
    icon: 'icon-file-s-7',
    color: '#67C23A'
  },
  video: {
    icon: 'icon-file-b-9',
    color: '#409EFF'
  },
  none: {
    icon: 'icon-file-b-8',
    color: '#606266'
  }
}


const iconStyle = computed(() => {
  return icons[`${props.item.file.type}`]
})


</script>

<style lang="scss" scoped>
.f-list:hover {
  background-color: rgba(45, 140, 240, .1);

  .other-hidden {
    display: flex;
  }
}

.f-list .other-hidden {
  display: none;
}
</style>